<template>
  <div>
    <div  class="home-container ">
    <van-cell title="推荐歌单" class="title"  />

    <van-grid :border="false" :column-num="3">
  <van-grid-item v-for="obj in recommendlist" :key="obj.id">
    <van-image :src="obj.picUrl"  width="100"
  height="100"/>
    <p class="van-multi-ellipsis--l2">{{obj.name}}</p>

  </van-grid-item>

    </van-grid>
    <van-cell class="title" title="最新音乐"  />
        <music-item  :row="obj" v-for="obj in newsonglist" :key="obj.id" />

    </div>
  </div>
</template>

<script>
import { recommend, recommendnewsongs } from '@/api/recommend.js'
import MusicItem from '../../components/MusicItem.vue'
export default {
  components: { MusicItem },
  name: 'home',
  data () {
    return {
      recommendlist: [],
      newsonglist: []
    }
  },
  created () {
    this.getrecommendsong()
    this.getrecommendnewsongs()
  },
  methods: {
    async getrecommendsong () {
      try {
        const res = await recommend()
        this.recommendlist = res.data.result
      } catch (error) {
        console.log(error)
      }
    },
    async getrecommendnewsongs () {
      try {
        const res = await recommendnewsongs(20)
        this.newsonglist = res.data.result
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-cell__label {
  line-height: 18px;
  height: 40px;
}
.home-container{
  padding: 0 10px;

}
.van-grid {
  // display: flex;
  // align-items: top;
  // justify-content: space-between;
  p {
    line-height: 20px;
    height: 40px;
    font-size: 12px;
    text-align-last: left;
    padding: 0 15px;
    box-sizing: border-box;
  }
}
/deep/.van-grid-item__content {
  padding: 5px 0;
}
.title {
  background-color: #c71d24;
  color: #fff;
}
</style>
